<template>
  <div>
    <!-- 最顶部  top-->
    <div class="top">
      <div class="top-center">
        <ul class="top-nav">
          <li class="top-item" v-if="!uname">
            <a href="/login" class="top-text">登录</a>
            <a href="/register" class="top-text">注册</a>
          </li>
          <li class="top-item" v-else>
            <span>欢迎:{{ uname }}</span>
            <button @click="$store.commit('updateUname', null)">退出</button>
          </li>
          <span class="span">&nbsp;|&nbsp;</span>

          <li class="top-item">
            <a href="#" class="top-text">我的订单</a>
          </li>
          <span class="span">&nbsp;|&nbsp;</span>
          <li class="top-item">
            <a href="#" class="top-text">关于我们</a>
          </li>
          <span class="span">&nbsp;|&nbsp;</span>
          <li class="top-item">
            <a href="#" class="top-text">客服热线</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- logo区域+搜索 -->
    <div class="logo-serach">
      <div class="content">
        <!-- logo -->
        <div class="logo">
          <a href="#"><img src="../assets/img/logo.png" alt="" /></a>
        </div>
        <!-- serach -->
        <div class="center-serach">
          <input
            type="text"
            placeholder="请输入搜索的内容"
            v-model="petName"
            @keyup.enter="$router.push(`/buydog?pname=${petName}`)"
          />
          <button
            type="submit"
            @click="$router.push(`/buydog?pname=${petName}`)"
          >
            搜索
          </button>
        </div>
        <!-- publish  发布-->
        <div class="publish">
          <a href="#">发布信息</a>
          <a href="#">犬舍入住</a>
        </div>
      </div>
    </div>
    <!-- 导航栏菜单区域 -->
    <div class="nav">
      <ul class="zoo">
        <li class="zoo-dog">
          <div class="none active show1">
            <div class="navdog">
              <img src="../assets/img/Menu01.png" />
              热门狗狗
            </div>
            <div class="hot_dog">
              <ul class="hot_dog_item" v-if="dog">
                <li v-for="{ breed_name, bid } in pdog" :key="bid">
                  <a @click="$router.push(`buydog?type_id=1&bid=${bid}`)">
                    <img src="../assets/img/Ndog01.jpg" alt="" />
                    <p>{{ breed_name }}</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div class="none show2">
            <div class="navdog">
              <img src="../assets/img/Menu02.png" alt="" />
              热门猫咪
            </div>
            <div class="hot_cat">
              <ul class="hot_cat_item" v-if="cat">
                <li v-for="{ breed_name, bid } in pcat" :key="bid">
                  <a @click="$router.push(`buydog?type_id=2&bid=${bid}`)">
                    <img src="../assets/img/Ncat01.jpg" alt="" />
                    <p>{{ breed_name }}</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="zoo-item"><router-link to="/">首页</router-link></li>
        <li class="zoo-item">
          <router-link to="/buydog?type_id=1&bid=2">我要买狗</router-link>
        </li>
        <li class="zoo-item">
          <router-link to="/buydog?type_id=2&bid=10">我要买猫</router-link>
        </li>
        <li class="zoo-item"><router-link to="/dog">选狗知识</router-link></li>
        <li class="zoo-item"><router-link to="/cat">选猫知识</router-link></li>
        <li class="zoo-item"><router-link to="/">异宠知识</router-link></li>
        <li class="zoo-item"><router-link to="/">官网资讯</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
import "../assets/css/reset.css";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      dog: null,
      cat: null,
      petName: null,
    };
  },
  computed: {
    pdog() {
      return this.dog.data;
    },
    pcat() {
      return this.cat.data;
    },
    ...mapState(["uname"]),
  },
  mounted() {
    this.getDog();
    this.getCat();
  },
  methods: {
    getDog() {
      this.axios.get("/v1/type/dog").then((res) => {
        console.log("狗狗详情:", res);
        this.dog = res.data;
      });
    },
    getCat() {
      this.axios.get("/v1/type/cat").then((res) => {
        console.log("猫猫详情:", res);
        this.cat = res.data;
      });
    },

    ...mapMutations("updateUname"),
  },
};
</script>

<style lang="scss" scoped></style>
